<template>
	<view class="teambox">
		<view class="typeBox">
			<view class="item" :class="{'selected':query.disUserRank==0}" @click="setTab(0)">商户</view>
			<view class="item" :class="{'selected':query.disUserRank==1}" @click="setTab(1)">VIP</view>
			<view class="item" :class="{'selected':query.disUserRank==2}" @click="setTab(2)">创客</view>
			<view class="item" :class="{'selected':query.disUserRank==3}" @click="setTab(3)">品牌推广</view>
			<view class="item" :class="{'selected':query.disUserRank==4}" @click="setTab(4)">区代</view>
			<view class="item" :class="{'selected':query.disUserRank==5}" @click="setTab(5)">市代</view>
			<view class="item" :class="{'selected':query.disUserRank==6}" @click="setTab(6)">省代</view>
		</view>
		<view class="total">
			总人数：
			<text class="txt">{{total}} 人</text>
		</view>
		<view class="shList" v-if="lists && lists.length">
			<view class="shItem" v-for="(dt,index) in lists || []" :key="index">
				<view class="imgBox">
					<image mode="aspectFill" class="img" :src="dt.headerImg"></image>
				</view>
				<view class="conBox">
					<text class="txt">{{dt.realName || '--'}}</text>
					<text class="txt">
						<template v-if="query.disUserRank==1">VIP</template>
						<template v-else-if="query.disUserRank==2">创客</template>
						<template v-else-if="query.disUserRank==3">品牌推广</template>
						<template v-else-if="query.disUserRank==4">区代</template>
						<template v-else-if="query.disUserRank==5">市代</template>
						<template v-else-if="query.disUserRank==6">省代</template>
						<template v-else>--</template>
					</text>
					<text class="txt time">{{dt.createTime}}</text>
				</view>
				<view class="phone">
					<p>电话：</p>
					<p>{{dt.mobile || "--"}}</p>
				</view>
			</view>
		</view>
		<empty v-if="lists && lists.length<1"/>
	</view>
</template>

<script>
	import http from "@/common/http.js"
	import user from "@/common/user.js"
	import {getMemberRelation} from '@/api/index.js'
	import empty from "@/components/empty/empty.vue"
	export default {
		components:{
			empty
		},
		data() {
			return {
				myParent: {},
				loadMore: true,
				lists: '',
				total:0,
				query: {
					"allocatedStatus": "",
					"boundStatus": "",
					"current": 1,
					"endDate": "",
					"secret": "",
					"size": 20,
					"startDate": "",
					"userId": "",
					disUserRank:0,
				}
			}
		},
		onLoad() {
			//this.getMy();
			user.getSign(secret => {
				this.query.secret = secret;
				this.query.userId = user.getUserId()
				this.refData();
			})
		},
		onReachBottom() {
			if (this.loadMore) {
				this.query.current++;
				this.getData();
			}
		},
		onPullDownRefresh() {
			this.refData();
		},
		methods: {
			setTab(index){
				this.query.disUserRank = index
				this.refData()
			},
			phoneCall() {
				console.log("--->" + this.myParent.mobile);
				uni.makePhoneCall({
					phoneNumber: this.myParent.mobile
				});
			},
			getMy() {
				http.request({
					url: '/api/v1/getMemberParent',
					data: {
						userId: user.getUserId()
					},
					success: ret => {
						console.log(ret);
						this.myParent = ret;
					},
					fail: ret => {
						uni.showToast({
							icon: "error",
							title: '获取邀请信息失败'
						})
					}
				})
			},
			refData() {
				this.query.current = 1;
				this.lists = '';
				this.getData();
			},
			getData() {
				http.request({
					url: "/api/v1/getMemberRelation",
					data: this.query,
					success: ret => {
						//console.log("LLL:",ret)
						!this.lists && (this.lists = [])
						uni.stopPullDownRefresh();
						if (ret && ret.rows && ret.rows.length) {
							this.lists.push(...ret.rows)
						} else {
							this.loadMore = false;
						}
						this.total = ret.total
					},
					fail: ret => {
						uni.showToast({
							icon: "error",
							title: '获取邀请信息失败'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

.typeBox{
		display: flex;
		// position:fixed;
		// z-index: 100;
		// left: 0;
		// top: var(--window-top);
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		margin: 0 0 30rpx 0;
		background: #fff;
		box-shadow: 0 0 10rpx #999;
		.item{
			flex: 1;
			text-align: center;
			font-size: 26rpx;
			height: 100%;
			border-bottom: 6rpx solid #f1f1f1;
			&.selected{
				border-bottom: 6rpx solid #0dacf7;
				color: #0dacf7;
			}
		}
	}
.teambox{
	//padding: 120rpx 0 0 0;
}
.total{
	font-size: 26rpx;
	padding: 0 30rpx;
	.txt{
		font-weight: bold;
		color: #0dacf7;
	}
}
.shList{
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	width: 100%;
	.shItem{
		box-sizing: border-box;
		display: flex;
		background: #fff;
		border-radius:20rpx ;
		padding: 20rpx;
		margin: 0 0 30rpx 0;
		.imgBox{
			height: 100rpx;
			width: 100rpx;
			border-radius:50% ;
			overflow: hidden;
			margin: 10rpx 0 0 0;
			.img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.conBox{
			flex: 1;
			line-height: 40rpx;
			padding: 0 0 0 15rpx;
			font-size: 26rpx;
			.txt{
				display: block;
				&.time{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
		.phone{
			display: flex;
			flex-flow: column;
			justify-content: center;
			width: 170rpx;
			line-height: 46rpx;
		}
	}
}
</style>
